import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:terminal_flutter_demo/generated/l10n.dart';
import 'package:terminal_flutter_demo/pages/mobxpages/store/mobx_counter.dart';

class MobxConsumerPage extends StatefulWidget {
  const MobxConsumerPage(this.mobxCounter, {Key? key}) : super(key: key);

  final MobxCounter mobxCounter;

  @override
  _MobxConsumerPageState createState() => _MobxConsumerPageState();
}

class _MobxConsumerPageState extends State<MobxConsumerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('consumer store'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 30),
            SizedBox(
              width: 200,
              child: ElevatedButton.icon(
                icon: const Icon(Icons.add),
                onPressed: () {
                  widget.mobxCounter.increnment();
                  widget.mobxCounter
                      .setDarkMode(value: !widget.mobxCounter.useDarkMode);
                },
                label: Observer(
                  builder: (context) => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text('${widget.mobxCounter.count}'),
                      Text(widget.mobxCounter.useDarkMode
                          ? 'dark black'
                          : 'dart white'),
                    ],
                  ),
                ),
              ),
            ),
            Observer(
              builder: (context) => SwitchListTile(
                value: widget.mobxCounter.useDarkMode,
                title: const Text('Use dark mode'),
                onChanged: (value) {
                  widget.mobxCounter.setDarkMode(value: value);
                },
              ),
            ),
            const SizedBox(height: 30),
            Observer(
              builder: (context) => SwitchListTile(
                value: widget.mobxCounter.useLanguage == 'zh',
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(widget.mobxCounter.useLanguage),
                    Text(S.current.title),
                  ],
                ),
                onChanged: (value) {
                  widget.mobxCounter.setLanguage(
                      value:
                          widget.mobxCounter.useLanguage == 'zh' ? 'en' : 'zh');
                },
              ),
            ),
            const SizedBox(height: 30),
            ElevatedButton.icon(
              icon: const Icon(Icons.exit_to_app_sharp),
              onPressed: () {
                Navigator.of(context).pop();
              },
              label: const Text('返回'),
            ),
          ],
        ),
      ),
    );
  }
}
